<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>月子服务</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/child.css">
	<link rel="stylesheet" href="css/MomPhotoDetail.css" />
	<link rel="stylesheet" href="css/upWindow.css" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="bootstrap/js/jquery1.11.3.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script><!--平面轮播-->
	<!--<script src="js/ZoomPic.js"></script>-->
    <script type="text/javascript" src="js/register.js"></script>
    <script type="text/javascript" src="js/topPublic.js"></script>
</head>
<body>
<script type="text/javascript" src="js/header.js" ></script>
<div style="background-color: #f7f7f7;">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <img  src="img/2016-06-12_173820.jpg"  style="width: 100%;margin-bottom: 30px;min-width:1178px;"/>
            </div>
        </div>

        <div class="row-fluid">
            <div class="head-main">
                <div class="row-fluid">
                    <div class="fl" style="width: 285px;">
                        <div class="accordion" id="accordion-190303">
                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <div class="accordion-toggle child-1" style=" padding-bottom: 20px;padding-top: 20px;margin-bottom: 10px;" data-toggle="collapse" data-parent="#accordion-190303" href="#accordion-element-71038">美国服务 <span style="font-size: 14px;">/ USA Service</span></div>
                                </div>
                                <div id="accordion-element-71038" class="accordion-body in collapse">
                                    <div class="accordion-inner child-package" mid='1' onclick="window.location.href='America.html'">饮食服务<span class="child-package-r">></span>
                                    </div>
                                    <div class="accordion-inner child-package" mid='2' onclick="window.location.href='americatravel.html'">出行旅游<span class="child-package-r">></span>
                                    </div>
                                    <div class="accordion-inner child-package" mid='3' onclick="window.location.href='americachan.html'">产检服务<span class="child-package-r">></span>
                                    </div>
                                    <div class="accordion-inner child-package child-flow" mid='4' onclick="window.location.href='americayue.html'">月子服务<span class="child-package-r">></span>
                                    </div>
                                    <div class="accordion-inner child-package" mid='5' onclick="window.location.href='americazheng.html'">办证服务<span class="child-package-r">></span>
                                    </div>
                                    <div class="accordion-inner child-package" mid='6' onclick="window.location.href='americacamera.html'">儿童摄影<span class="child-package-r">></span>
                                    </div>
                                </div>
                            </div>

                            <script>
                                
                            </script>

                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <div class="accordion-toggle collapsed child-2" style=" padding-bottom: 20px;padding-top: 20px;margin-bottom: 10px;" data-toggle="collapse" onclick="window.open('http://tb.53kf.com/code/client/10130038/1][img]http://tb.53kf.com/kfimg.php?arg=10130038&style=1[/img]','_blank','height=500,width=750,top=220,left=500')">在线咨询</div>
                                </div>
                            </div>
                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <div class="accordion-toggle collapsed child-3" style=" padding-bottom: 20px;padding-top: 20px;margin-bottom: 10px;" data-toggle="collapse" data-parent="#accordion-190303"><span class="glyphicon glyphicon-th-list"  style="color: #ffffff;"></span>套餐参考</div>
                                </div>
                               
                            </div>
                        </div>
                        <div>
                            <div class="child-contact">联系我们 <span style="font-size: 14px;color: #ccc;">/Contact Us</span></div>
                            <p class="top-line" ></p>
                            <div><img src="img/2016-06-07_140314.png" style="width:285px;height:120px;margin-top:10px;margin-bottom:20px;"></div>
                            <div class="child-name">南京圣嘉尔</div>
                            <div class="child-add">地址：南京市秦淮区汉中路</div>
                            <div class="child-add">89号金鹰国际商城24层C3</div>
                            <div class="child-add">电话：400-163-0766</div>
                            <div class="child-add">手机：18625170088</div>
                            <div class="child-add">QQ：2199207469</div>
                        </div>
                    </div>
<!------月子服务------>                    
                    <div class="fl bo mids mainwidth" id="mid4">
                        <div class="flow-title">月子服务</div><span class="fl" style="border: 3px solid #eb6100;width:99px;"></span><span class="fr" style="border-bottom:2px solid #EBEBEB;width:755px;height:2px;"></span><div class="clear"></div>
                        
                        <div style="overflow: hidden;margin-top: 20px;">
                        	<div class="bo fl usa-mon-1" id="leftbox">
	                        	<!--<p class="photo-kind confinement" onclick="confinement()">美妈护理</p>
	                        	<p class="photo-kind" onclick="confinement()">美宝护理</p>-->
	                        </div>
	                        <div class="fl usa-mon-2" id="usamon">
	                            <!--<div class="bigblock">
	                            	<div class="usa-mon-2-zi">
	                            		<a class="more">MORE</a>
	                            	</div>
	                            	<p class="lrpadding text-indent">111111</p>
	                            	<div class="imgbox">
	                            		<div class="bimg"><img src="img/baby10.jpg"/></div>
		                            	<div class="simg"><img src="img/baby10.jpg"/></div>
		                            	<div class="simg"><img src="img/baby10.jpg"/></div>
		                            	<div class="simg"><img src="img/baby10.jpg"/></div>
	                            	</div>
	                            </div>-->
	                        </div>
                        </div>
                    	<div class="clear"></div>
                    	<div class="add-comments">
							<div class="word-limit">
								<span id="counter" class="span1">0</span>
								<span>/</span>
								<span>300</span>
							</div>
							<textarea maxlength="300" class="mes" id="status" name="status" rows="6" cols="40"  placeholder="看到槽点，不吐不快！别憋着，马上大声说出来吧！"></textarea>
							<span class="addcomm" onclick="publishcomm()">发表评论</span>
							<ul class="all-comments">
								<li class="comm-list no-pad">
									<span class="comm-list-title2 comm-list-title-che" id="one2" onclick="submitcomm('b8ed798fdc8a44baa6ca8b3aec8ba083')">全部评论<span class="totalRowNumber totalRowNumber1"></span></span>
									<span class="comm-list-title2" id="two2" onclick="submitmycomm('b8ed798fdc8a44baa6ca8b3aec8ba083')">我的评论<span class="totalRowNumber totalRowNumber2"></span></span>
								</li>
								<ul class="all-comments-one" id="all-comments-one2">
									<div class="commbox"></div>
								</ul>
							</ul>
						</div>
                    </div>
                </div>
            </div>
            
        </div>
    	
    	
    </div>
</div>
<input type="hidden" value="america" id="navid" />
<script type="text/javascript" src="js/footer.js" ></script>
<script src="js/banner.js"></script>

<script type="text/javascript">
var detinfo = '';
$(document).ready(function(){
	confinement();
	submitcomm('b8ed798fdc8a44baa6ca8b3aec8ba083');
})

//	月子服务
	function confinement(tubes){
		$.ajax({
			url:'/baby/usaBabyMonth/queryMenuUsaBabyMonth',
			data:{
				menutype : 'b8ed798fdc8a44baa6ca8b3aec8ba083'
			},
			type:'post',
			cache:false,
			dataType:'json',
			success:function(data){
				console.log(data);
//				$(".mbjyjjDiv8").text('');
//				$(".focus_Box").text('');
				if(data.code == '2000'){
					var data = data.data;
					var introduce = '';
					var img = '';
					var title = '';
					var str = '';
					var leftbox = '';
					for(var i = 0; i < data.length; i++ ){
						title = data[i].title;
						if(data[i].introduce == null ){
							introduce = '';
						}else{
							introduce = data[i].introduce;
						}
						imgs = data[i].imgData;
						var div=''
						if(i==0){
								leftbox = '<p class="photo-kind confinement">'+title+'</p>';
							
						}else{
								leftbox += '<p class="photo-kind">'+title+'</p>';
						}
						$("#leftbox").html(leftbox);
						var img='';
						try{
							for(var m=0;m<5;m++){
								if(m==0){
									img ='<div class="bimg"><img src="'+imgs[m].realPicUrl+'@!cpr"/></div>'
								}else{
									img +='<div class="simg"><img src="'+imgs[m].realPicUrl+'@!cpr"/></div>'
								}
							}
						}catch(e){
							//TODO handle the exception
						}
						
						str	+=	' <div class="bigblock" id="mon'+i+'">'
	                            +'	<div class="usa-mon-2-zi">'
	                            +	'	<a class="more" onclick="moresss('+i+',\''+data[i].sid+'\')">MORE</a>'
	                            +	'</div>'
	                            +'	<div class="lrpadding text-indent">'+introduce+'</div>'
	                            +'	<div class="imgbox">'
	                            +		img
	                            +	'</div>'
		                           	
	                            +	'</div>'
	                           	+'</div>'
					}
					$("#usamon").html(str);
					$("#usamon").find(".bigblock").eq(0).show().siblings().hide();
					$(".photo-kind").click(function(){
						$(this).addClass("confinement").siblings().removeClass("confinement");
						$("#usamon").find(".bigblock").eq($(this).index()).show().siblings().hide();
						$(".add-comments").show();
					})
				}
			},error:function(data) {
				console.log("服务请求的人太多"+data);
			}
		})
	}
	function moresss(i,sid){
		$("#mon"+i).hide();
		$.ajax({
			url:'/baby/usaBabyMonth/getUsaBabyMonth',
			data:{
				sid : sid
			},
			type:'post',
			cache:false,
			dataType:'json',
			success:function(data){
				console.log(data);
				if(data.code == '2000'){
					var str='';
					var img='';
					var imgs=data.data.imgData;
					for(var m=0;m<imgs.length;m++){
							
						img +='<div class="simg"><img src="'+imgs[m].realPicUrl+'@!cpr"/>	</div>'
							
						}
					str	+=	' <div class="bigblock" id="mons">'
	                            +'	<div class="imgbox">'
	                            +		img
	                            +	'</div>'
	                           	+'</div>';
				}
				$("#mons").remove();
				$("#usamon").append(str);
				$(".add-comments").hide();
				
			},error:function(){
			
			}
		});
	
}
	//发表评论
		function publishcomm(){
			var commentMsg = $("#status").val();
			if(commentMsg==''){
		    	alert("请填写评论内容");
		      	return 
		    }
			var sid=$("#sid").val();
			$.ajax({
				url: '/baby/comment/addComment',
				data: {
					contentId:'b8ed798fdc8a44baa6ca8b3aec8ba083',
					commentMsg:commentMsg
				},
				type: 'post',
				cache: false,
				dataType: 'json',
				success: function(data) {
					console.log(data);
					if(data.code == "2000"){
						alert(data.message);  //评论成功提示语
						$("#status").val("");
						submitcomm('b8ed798fdc8a44baa6ca8b3aec8ba083');
					}else if(data.code == "5001"){
						$('.theme-popover-mask').show();
						$('.theme-popover-mask').height($(document).height());
						$('.theme-popover').slideDown(200);
					}
				}
			})
		}
////////所有评论////////
	function submitcomm(id){
		//var sid = $("#sid").val();
		$.ajax({
			url: '/baby/comment/queryComment',
			data: {
				key : id
			},
			type: 'post',
			cache: false,
			dataType: 'json',
			success: function(data) {
				if(data.code == "2000") {
					$(".commbox").text('');
					$(".totalRowNumber1").text('');
					$(".totalRowNumber2").text('');
					var datalist = data.data.dataList;
					var userName = '';
					var commentMsg = '';
					var str = '';
					var time = '';
					var totalRowNumber = '&nbsp;&nbsp;('+ data.data.totalRowNumber +')&nbsp;&nbsp;';
					for(i = 0; i < datalist.length; i++) {
						var img = datalist[i].user.realPicUrl;
						commentMsg = datalist[i].commentMsg;
						userName = datalist[i].user.userName;
						time = datalist[i].commentCreateTime;
						str = 	'<li class="comm-list">'+	
									'<img src="'+ img+'" />'+
									'<div class="comm-list-text">'+
										'<span style="color: #656565;font-weight: bold;">'+userName+'</span>'+
										'<span style="color: #b7b7b7;margin-left: 10px;">'+time+'</span>'+
										'<p class="word-break" id="commentMsg" style="color: #656565;line-height: 20px;margin-top: 8px;">'+commentMsg+'</p>'+
									'</div>'+
								'</li>';
						$(".commbox").append(str);
					}
					$(".totalRowNumber1").append(totalRowNumber);
					console.log(data);
				}
			},
			error: function(data) {
				console.log("服务请求的人太多"+data);
			}
		})
	}
////////我的评论////////
	function submitmycomm(sid){
//		var sid=$("#sid").val();
		$.ajax({
			url: '/baby/comment/getComment',
			data: {
				key : sid
			},
			type: 'post',
			cache: false,
			dataType: 'json',
			success: function(data) {
				if(data.code == "2000") {
					$(".commbox").text('');
					$(".totalRowNumber2").text('');
					$(".totalRowNumber1").text('');
					var datalist = data.data.dataList;
					var userName = '';
					var commentMsg = '';
					var str = '';
					var time = '';
					var totalRowNumber = '&nbsp;&nbsp;('+ data.data.totalRowNumber +')&nbsp;&nbsp;';
					var userId = '';
					var img;
					for(i = 0; i < datalist.length; i++) {
						try{
							var img = datalist[i].user.realPicUrl;
							commentMsg = datalist[i].commentMsg;
							userName = datalist[i].user.userName;
							time = datalist[i].commentCreateTime;
							userId = datalist[i].userId;
							str = 	'<li class="comm-list">'+	
										'<img src="'+ img+'" />'+
										'<div class="comm-list-text">'+
											'<span style="color: #656565;font-weight: bold;">'+userName+'</span>'+
											'<span style="color: #b7b7b7;margin-left: 10px;">'+time+'</span>'+
											'<p class="word-break" id="commentMsg" style="color: #656565;line-height: 20px;margin-top: 8px;">'+commentMsg+'</p>'+
										'</div>'+
									'</li>';
						$(".commbox").append(str);
						}catch(e){
							//TODO handle the exception
						}
					}
					$(".totalRowNumber2").append(totalRowNumber);
					console.log(data);
				}else if(data.code == "5001"){
					$('.theme-popover-mask').show();
					$('.theme-popover-mask').height($(document).height());
					$('.theme-popover').slideDown(200);
				}
			},
			error: function(data) {
				console.log("服务请求的人太多"+data);
			}
		})
	}
//留言板字数
	document.getElementById("status").addEventListener('input',function(e){
		var len = document.getElementById("status").value.length;
		document.getElementById("counter").innerHTML = len
	})
</script>
</body>
</html>